<template>
	<view>
		<fa-navbar title="操作记录"></fa-navbar>
		<view v-if="AssetName">
			<scroll-view class="pb-6" scroll-y="true">
				<u-gap class="mt-1" height="40" bg-color="#F6F8FB"></u-gap>
				<view class="asset-name-block flex-column-tb">
					<view class="h2-font pl-1 mt-44">{{AssetName}}</view>
					<view class="h3-font-dim-gray mb-30 pl-1">更新时间{{UpdateTime}}</view>
				</view>
				<u-gap class="mt-1" height="40" bg-color="#F6F8FB"></u-gap>
				<view class=" p-1">
					<view v-for="(item, index) in Items" :key="item.Guid">
						<view class="flex-between-center">
							<view class="flex-start">
								<view class="time-line time-line-item-height">
									<u-line v-if="index === Items.length - 1" direction="col" class="time-line-last"></u-line>
									<u-line v-else direction="col" class="time-line-first"></u-line>
									<image v-if="index == 0" src="/static/images/asset_operate_record_edit.svg" class="line-icon"></image>
									<image v-else-if="index !== Items.length - 1" src="/static/images/asset_operate_record_management.svg" class="line-icon"></image>
									<image v-else src="/static/images/asset_operate_record_input.svg" class="line-icon"></image>
								</view>
								<view class="pl-1 flex-center">
									<view>
										<view v-if="item.OprType == 'FASG_OPR_TYPE_0001'" class="h3-font">增加资产&emsp;&emsp;&emsp;操作员:&ensp;{{item.UserNameCn}}</view>
										<view v-else-if="item.OprType === 'FASG_OPR_TYPE_0002'" class="h3-font">编辑资产&emsp;&emsp;&emsp;操作员:&ensp;{{item.UserNameCn}}</view>
										<view v-else-if="item.OprType === 'FASG_OPR_TYPE_0003'" class="h3-font">转移资产&emsp;&emsp;&emsp;操作员:&ensp;{{item.UserNameCn}}</view>
										<view class="h4-font-dim-gray mt-m1 mb-m1">{{item.Describe}}</view>
										<view class="h5-font-light-gray">{{item.CreateTime}}</view>
									</view>
								</view>
							</view>
							<view class="time-line-item-height flex-start">
								<view class="h4-font-royal-blue" hover-class="check-detail-btn" @click="toItemAssetDetailEdit(item.Guid)">查看详情</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-center height100" v-else>没有查询到操作记录</view>
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	import SOtime from '@/js_sdk/fl-SOtime/SOtime.js'

	export default {
		components: {
			faNavbar
		},
		data() {
			return {
				Guid: undefined,
				AssetName: undefined,
				Items: [{
					CreateTime: undefined,
					Describe: undefined,
					Guid: undefined,
					OprType: undefined,
					UserId: undefined,
					UserName: undefined
				}],
				UpdateTime: undefined
			}
		},
		onLoad(options) {
			console.log(options)
			this.Guid = options.guid
		},

		onShow() {
			this.getListLog(this.Guid)
		},
		methods: {
			toItemAssetDetailEdit(guid) {
				uni.navigateTo({
					url: '/pages/user/record/detail?detailId='+guid
				})
			},
			
			getListLog(guid) {
				let params = {
					ID: guid
				}
				this.$api.getOperationListByAssetID(params)
					.then(res => {
						console.log(res)
						if (res.code === 0) {
							this.AssetName = res.data.AssetName
							this.Items = res.data.OpItems
							if (this.Items.length > 0) {
								for (var i = 0; i < this.Items.length; i++) {
									this.Items[i].CreateTime = SOtime.time3(this.Items[i].CreateTime)
								}
							}
							if (res.data.UpdateTime !== 0) {
								this.UpdateTime = SOtime.time3(res.data.UpdateTime)
							}
						}
					})
			},
		}
	}
</script>

<style lang="scss">
	.line-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.check-detail-btn {
		color: #007AFF;
	}

	.content-item {
		height: 150rpx;
	}

	.asset-name-block {
		height: 176rpx;
	}

	.u-line {
		position: relative;
		display: flex;
		height: 100%;
		background: #18B566;
		right: 32rpx;
	}

	.time-line-item-height {
		height: 160rpx;
	}

	.time-line {
		position: relative;
		display: flex;
		align-items: center;
	}

	.time-line-first {
		position: relative;
		display: flex;
		height: 100%;
		top: 50%;
		background: #18B566;
		left: 32rpx;
	}

	.time-line-last {
		position: relative;
		display: flex;
		height: 100%;
		bottom: 50%;
		background: #aaff00;
		left: 10rpx;
	}
</style>
